<template>
  <tree-table
    class="tb-cate"
    index-text=""
    show-index
    border
    :data="myData"
    :columns="columns"
    :expand-type="false"
    :selection-type="false"
    v-loading="isLoading"
  >
    <template slot="is_deleted" slot-scope="scope">
      <i
        class="el-icon-success"
        v-if="scope.row.cat_deleted == false"
        style="color: lightGreen"
      ></i>
      <i class="el-icon-error" v-else style="color: red"></i>
    </template>
    <template slot="level" slot-scope="scope">
      <el-tag
        type="primary"
        effect="plain"
        size="mini"
        v-if="scope.row.cat_level === 0"
        >一级</el-tag
      >
      <el-tag
        type="success"
        effect="plain"
        size="mini"
        v-else-if="scope.row.cat_level === 1"
        >二级</el-tag
      >
      <el-tag type="warning" effect="plain" size="mini" v-else>三级</el-tag>
    </template>
    <template slot="opt" slot-scope="scope">
      <el-button
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="getCat(scope.row)"
        >编辑</el-button
      >
      <el-button
        type="danger"
        icon="el-icon-delete"
        size="mini"
        @click="delCat(scope.row)"
        >删除</el-button
      >
      <el-dialog :visible.sync="editShow" width="500px">
        <el-form :model="editForm" label-width="80px" ref="editCatForm">
          <el-form-item label="分类名称" prop="cat_name">
            <el-input
              v-model="editForm.cat_name"
              auto-complete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editShow = false">取 消</el-button>
          <el-button type="primary" @click="editCat">确 定</el-button>
        </div>
      </el-dialog>
    </template>
  </tree-table>
</template>

<script>
import { getCategoriesList, delCat, editCat, getCat } from "@/api/index";
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      myData: [],
      isLoading: false,
      editShow: false,
      categoriesList: [],
      editForm: {
        cat_name: "",
        cat_id: 0,
        cat_pid: 0,
        cat_level: 0
      }
    };
  },
  methods: {
    async initList() {
      await getCategoriesList(this.queryInfo).then(({ data, meta }) => {
        if (meta.status == 200) {
          this.categoriesList = data;
        } else {
          this.$message.error(meta.msg);
        }
      });
    },
    // 编辑商品分类
    async getCat(row) {
      this.editShow = true;
      await getCat(row.cat_id).then(({ data }) => {
        this.editForm.cat_id = data.cat_id;
        this.editForm.cat_name = data.cat_name;
        this.editForm.cat_pid = data.cat_pid;
        this.editForm.cat_level = data.cat_level;
      });
    },
    async editCat() {
      await editCat(this.editForm.cat_id, {
        cat_name: this.editForm.cat_name
      }).then(async ({ meta }) => {
        if (meta.status == 200) {
          this.$message.success(meta.msg);
          await this.initList();
          this.$emit("handlerEdit", this.categoriesList);
          this.editShow = false;
        } else {
          this.$message.warning(meta.msg);
        }
      });
    },
    // 删除商品分类
    async delCat(row) {
      this.$confirm("真的要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await delCat(row.cat_id).then(async ({ meta }) => {
            if (meta.status == 200) {
              this.$message.success(meta.msg);
              await this.initList();
              this.$emit("handlerDel", this.categoriesList);
            } else {
              this.$message.warning(meta.msg);
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    }
  },
  created() {
    this.isLoading = true;
    // console.log(this.data);
  },
  watch: {
    data: function(newVal, oldVal) {
      this.isLoading = false;
      this.myData = newVal;
    }
  }
};
</script>

<style lang="scss" scoped>
.tree {
  line-height: 0;
}
</style>
